<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Router 侧边栏</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/react-router/4.2.0/react-router.js"></script>
    <script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="root"></div>

<p>代码</p>
<pre><code class="js">    ReactDOM.render(
        < h1 >欢迎使用React!< /h1>,
        document.getElementById('example')
    );
</code>
<script type="text/babel">
    const {
        BrowserRouter,
        Route,
        Link,
        Switch
    } = ReactRouterDOM;

    const Router = BrowserRouter;

    const routes = [
        {
            path: '/',
            exact:true,
            sidebar: () => <div>home!</div>,
            main: () => <h2>Home</h2>
        },
        { path: '/bubblegum',
            sidebar: () => <div>bubblegum!</div>,
            main: () => <h2>Bubblegum</h2>
        },
        { path: '/shoelaces',
            sidebar: () => <div>shoelaces!</div>,
            main: () => <h2>Shoelaces</h2>
        }
    ]

    const SidebarExample = () => (
        <Router>
            <div style={{ display: 'flex' }}>
                <div style={{
                    padding: '10px',
                    width: '20%',
                    background: '#f0f0f0'
                }}>
                    <ul style={{ listStyleType: 'none', padding: 0 }}>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/bubblegum">Bubblegum</Link></li>
                        <li><Link to="/shoelaces">Shoelaces</Link></li>
                    </ul>

                    {routes.map((route, index) => (
                        // You can render a <Route> in as many places
                        // as you want in your app. It will render along
                        // with any other <Route>s that also match the URL.
                        // So, a sidebar or breadcrumbs or anything else
                        // that requires you to render multiple things
                        // in multiple places at the same URL is nothing
                        // more than multiple <Route>s.
                        <Route
                            key={index}
                            path={route.path}
                            exact={route.exact}
                            component={route.sidebar}
                        />
                    ))}
                </div>

                <div style={{ flex: 1, padding: '10px' }}>
                    <Switch>
                    {routes.map((route, index) => (
                        // Render more <Route>s with the same paths as
                        // above, but different components this time.
                        <Route
                            key={index}
                            path={route.path}
                            exact={route.exact}
                            component={route.main}
                        />
                    ))}
                    </Switch>
                </div>
            </div>
        </Router>
    )

    ReactDOM.render(
        <SidebarExample />
        , document.getElementById('root')
    );
</script>

</body>
</html>